// import '../myjs/data'
// data.userList.forEach(item=>{
//     console.log("item",item);
// })
//控制用户列表Vue实例
var userListVM = new Vue({
    el: "#containers",
    data: {
        userList: data.userList,//数组
        loginUser: loginUser,//本页面登录的用户
        peerUser: {},//本页面用户要联系的用户
        content: content,//保存聊天内容
        sendContent: '',//登录用户发送的内容
        sendContentObj: { flag: 'login',peerUid:null, content: '', date: '' },//登录用户发送的内容对象  用户输入保存到这里 这个对象将加入到content中
        recvContent: '',//登录用户接收的内容         用户接收保存到这里 这个对象将加入到content中
        recvContentObj: { flag: 'peer',peerUid:null, content: '', date: '' },//登录用户接收的内容
        scrollBar: 50,//使聊天窗口的滚动条在底部
        showUserListFlag: false,//用户列表默认状态
        showChatWindowFlag: true,//聊天窗口默认状态
        online_people_count: data.userList.length,//用户在线人数
        searchUserName: '',//用户名检索
        showObject: true,//true显示个人频道   false显示世界频道
    },
    methods: {
        // 点击显示用户列表
        showUserList() {

            this.$data.showUserListFlag = !this.$data.showUserListFlag;
        },
        // 用户名检索
        search(searchUserName) {

            var newList = [];
            this.userList.filter(item => {
                //indexOf检查到''空时就会返回0
                if (item.username.indexOf(searchUserName) != -1) {
                    //如果存在 就放到新列表中
                    newList.push(item)
                }
            })
            //如果查找到 就返回查找到的内容 否则返回当前列表
            // console.log("newList：",newList)
            return newList;
        },
        //显示聊天窗口 遮罩层
        showChatWindow(user) {
            this.showChatWindowFlag = true;
            this.peerUser = user;
        },
        closeChatWindow() {
            this.showChatWindowFlag = false;
            //清除对等用户
            this.peerUser = {};
            //清除聊天内容
            content = [];
        },
        sendMsg() {
            //如果发送内容为空 就提示
            if (this.sendContent == '') {
                var input = document.getElementById('messageInput');
                input.placeholder = '不能发送空消息';
                alert("不能发送空消息")
                return;
            }
            //将发送的内容填入 sendContentObj对象
            this.sendContentObj.content = this.sendContent;
            //生成发生时间
            this.sendContentObj.date = new Date();
            //装载接收对象的Id
            this.sendContentObj.peerUid=this.peerUser.uid;
            console.log(this.sendContentObj)
            //封装接收对象
            this.recvContentObj.content = this.sendContent;
            this.recvContentObj.date = this.sendContentObj.date;
            this.recvContentObj.peerUid=this.sendContentObj.peerUid;
            //将sendContentObj对象加入content
            content.push(this.sendContentObj);
            //将输入框内容清空
            this.sendContent = '';
            //使用socket将消息对象解析成JSON对象发送到对等端 后端根据peerUid发送给接收方  
            // socket.send(JSON.stringify(sendContentObj));
        },
        recvMsg(recvContentObj) {//外部调用需要带参数
            //将接收到的消息解析成对象填入 content  
            this.content.push(JSON.parse(recvContentObj));
        }
    },
    filters: {},
    //在实例化初始化完成后被调用  实例已经完成以下配置：数据观测，属性和方法的运算，watch/event事件回调
    created: function () {
        //  console.log("数据加载完毕created：",this.content)

    },
    //  元素挂载后 将滚动条下拉到底部
    mounted: function () {
        this.$nextTick(() => {
            // console.log("数据加载完毕mounted：",this.content)
            var scrollBar = document.getElementById('scrollBar');
            //scrollBar.scrollHeight当前滚动条高度 scrollBar.scrollTop滚动条距离顶部距离
            scrollBar.scrollTop = scrollBar.scrollHeight;//不能加px
            // console.log("scrollHeight:",scrollBar.scrollTop)
        })
    },
    //回调函数 有元素添加时 调用
    updated: function () {
        //数据修改后 添加到面板后 将滚动条下拉到底部
        this.$nextTick(() => {
            //使滚动条一直在底部
            var scrollBar = document.getElementById('scrollBar');
            //scrollBar.scrollHeight当前滚动条高度 scrollBar.scrollTop滚动条距离顶部距离
            scrollBar.scrollTop = scrollBar.scrollHeight;
            // console.log("数据加载完毕：",this.content)
        })
    }
});

